<template>
  <div class="contents">
    <el-button
      class="btn-add"
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="addEquipment"
    >新增测项</el-button>
    <el-table
      :data="tableData"
      :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
      stripe
      size="small"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="code" label="测值编号"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | YMDHMS}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.remark">
            <span>{{scope.row.remark && scope.row.remark.length > 8 ? (scope.row.remark).substring(0,8) : scope.row.remark ? scope.row.remark : ''}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip content="编辑">
            <el-button
              type="text"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
          </el-tooltip>

          <el-tooltip content="删除">
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color:red !important"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <vx-popup
      :title="addtitle"
      width="500px"
      @close="closeFormSubmitData"
      :active.sync="cardDialogVisible"
      @confirmPopup="submit"
      @cancelPopup="cancelFormSubmitData"
    >
      <el-form
        :model="addRuleForm"
        :rules="addRules"
        ref="addRefRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="测项名称：" prop="name">
          <el-input v-model="addRuleForm.name" placeholder="请输入测项名称"></el-input>
        </el-form-item>
        <el-form-item label="测项编号：" prop="code">
          <el-input v-model="addRuleForm.code" placeholder="请输入测项编号"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input type="textarea" v-model="addRuleForm.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>

    
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { deepClone } from "@/util.js";
export default {
  props: {
    selectRow: {
      type: Object,
    },
  },
  data() {
    return {
      cardDialogVisible: false,
      settingVisible: false,
      addtitle: "新增",
      point: "",
      //   表格数据
      tableData: [],
      //   表单数据
      addRuleForm: {
        name: "",
        code: "",
        remark: "",
      },
      //   验证规则
      addRules: {
        name: [{ required: true, message: "请输入测项名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入测项编号", trigger: "blur" }],
      },
    };
  },
  components: {},
  methods: {
    // 新增
    addEquipment() {
      console.log(111);
      this.cardDialogVisible = true;
      this.addtitle = "新增";
      this.addRuleForm = {};
    },
    // 表格行编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.addtitle = "修改";
      this.cardDialogVisible = true;
      this.addRuleForm = deepClone(row);
    },
    // 表格行删除
    handleDelete(index, row) {
      console.log("index, row");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 删除测项
        this.$api.mearsuringPointSetting
          .deletePointItems({
            id: row.id,
            measurePointId: row.measurePointId,
          })
          .then((res) => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success",
                icon: "success",
              });
              this.getPointItem();
            }
          });
      });
    },
    // closesettingVisible
    closesettingVisible() {
      this.settingVisible = false;
    },
    submitSettingVisible() {
      // 提交配置信息
    },

    // 关闭弹框
    closeFormSubmitData() {
      this.cardDialogVisible = false;
      this.$refs.addRefRuleForm.resetFields();
    },
    // 取消弹框
    cancelFormSubmitData() {
      this.cardDialogVisible = false;
      this.$refs.addRefRuleForm.resetFields();
    },
    // 提交弹框
    submit() {
      this.$refs.addRefRuleForm.validate((valid) => {
        if (!valid) return;
        this.cardDialogVisible = false;
        if (this.addtitle == "新增") {
          let _params = {
            ownId: this.point.ownId,
            name: this.addRuleForm.name,
            code: this.addRuleForm.code,
            deviceId: this.point.deviceId,
            measurePointId: this.point.id,
            remark: this.addRuleForm.remark,
            measureProjectFirstTypeId: this.point.measurePointFirstTypeId,
            measureProjectSecondTypeId: this.point.measurePointSecondTypeId,
          };
          this.$api.mearsuringPointSetting
            .addPointItems(_params)
            .then((res) => {
              console.log("新增测项", res);
              if (res.data.success) {
                this.$vs.notify({
                  text: "新增成功",
                  color: "success",
                  icon: "success",
                });
                this.getPointItem();
              }
            });
        } else {
          let _params = {
            id: this.addRuleForm.id,
            ownId: this.point.ownId,
            name: this.addRuleForm.name,
            code: this.addRuleForm.code,
            deviceId: this.point.deviceId,
            measurePointId: this.point.id,
            remark: this.addRuleForm.remark,
            measureProjectFirstTypeId: this.point.measurePointFirstTypeId,
            measureProjectSecondTypeId: this.point.measurePointSecondTypeId,
          };
          this.$api.mearsuringPointSetting
            .updatePointItems(_params)
            .then((res) => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "修改成功",
                  color: "success",
                  icon: "success",
                });
                this.getPointItem();
              }
            });
        }
      });
    },
    // 获取 测项
    getPointItem() {
      this.$api.mearsuringPointSetting
        .getPointItems({
          measurePointId: this.point.id,
        })
        .then((res) => {
          console.log("获取测向", res.data.data[0]);
          this.tableData = res.data.data[0];
        });
    },
  },
  computed: {
    ...mapState("mpsModule", {
      initBridgeId: "InitBridgeId",
    }),
  },

  watch: {
    selectRow: {
      handler(newVal) {
        console.log("测点id", newVal);
        this.point = newVal;
        this.getPointItem();
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.contents {
  .btn-add {
    position: fixed;
    top: 207px;
    right: 52px;
  }
}
/deep/.el-select{
  width: 100% !important;
}
</style>